import React from 'react';
import { Swiper, SwiperItem, Image, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import bg_1 from '@/assets/public/bg-1.jpg';
import bg_2 from '@/assets/public/bg-2.jpg';
import bg_3 from '@/assets/public/bg-3.jpg';

export default function Component() {
  const onToProducts = () => {
    Taro.switchTab({ url: '/pages/products/index' });
  }
  return (
    <View className="w-full h-auto pb-[30px] px-2">
      <Swiper onClick={onToProducts} className='w-full h-[300px] rounded-md overflow-hidden' indicatorColor='#999' indicatorActiveColor='#333' circular indicatorDots autoplay interval={6000}>
        <SwiperItem className='w-full h-auto box-border'><Image className='w-full h-full object-cover' src={bg_1} /> </SwiperItem>
        <SwiperItem className='w-full h-auto box-border'><Image className='w-full h-full object-cover' src={bg_2} /></SwiperItem>
        <SwiperItem className='w-full h-auto box-border'><Image className='w-full h-full object-cover' src={bg_3} /></SwiperItem>
      </Swiper>
    </View>
  )
}
